import { Button, Form, Input, Select } from 'antd'
import React, {
  ChangeEvent,
  FC,
  memo,
  ReactNode,
  useCallback,
  useState
} from 'react'
import { ResetPwdWrapper } from '@/views/forget-pwd/c-cpns/reset-pwd/style'
import { myShallowEqual, useMyDispatch, useMySelector } from '@/store'
import { VerifyType } from '@/global/constant'
import { IGetCode } from '@/global/type'
import VerifyCodeButton from '@/components/verify-code-button'
import { verifyCodeAction } from '@/store/module/forget-pwd'
import { maskData } from '@/utils/masked'

interface IProps {
  children?: ReactNode
  nextStepClick: (step: number) => void
}

enum InputName {
  Password = 'password',
  ConfirmPassword = 'confirmPassword',
  Code = 'code'
}

const { Option } = Select
const ResetPwd: FC<IProps> = (props) => {
  const dispatch = useMyDispatch()

  // 从store中获取数据
  const { info, isCounting, account } = useMySelector(
    (state) => ({
      info: state.forgetPwd.info,
      account: state.forgetPwd.currentAccount,
      isCounting: state.app.isCounting
    }),
    myShallowEqual
  )
  // 输入密码
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  // 当前验证信息
  const [curVerifyInfo, setCurVerifyInfo] = useState(info.phone)
  const [curVerifyType, setCurVerifyType] = useState<VerifyType>(
    VerifyType.Phone
  )
  const [code, setCode] = useState('')

  const selectAfter = (
    <Select
      disabled={isCounting}
      defaultValue={0}
      onChange={handleSelectChange}
    >
      <Option value={VerifyType.Phone}>手机</Option>
      <Option value={VerifyType.Email}>邮箱</Option>
    </Select>
  )

  /** 回调 **/
  // 切换验证模式触发的回调
  function handleSelectChange(type: number) {
    if (type === VerifyType.Phone) {
      // 1.手机验证
      setCurVerifyType(VerifyType.Phone)
      setCurVerifyInfo(info.phone)
    } else {
      // 2.邮箱验证
      setCurVerifyType(VerifyType.Email)
      setCurVerifyInfo(info.email)
    }
  }

  // 输入框重新输入触发的回调
  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const name = e.target.name
    const value = e.target.value
    switch (name) {
      case InputName.Password:
        setPassword(value)
        break
      case InputName.ConfirmPassword:
        setConfirmPassword(value)
        break
      case InputName.Code:
        setCode(value)
        break
    }
  }
  // 确认密码的校验规则
  const validateConfirmPassword = (rule: any, value: string) => {
    if (value && value !== password) {
      return Promise.reject('两次输入的密码不一致')
    }
    return Promise.resolve()
  }
  // 获取验证码
  const getCodeClick = useCallback(() => {
    const config: IGetCode = {
      type: curVerifyType,
      data: curVerifyInfo
    }
    return config
  }, [curVerifyInfo, curVerifyType])

  // 提交表单逻辑
  function onFinish() {
    // 整理重置的参数
    const params = {
      code,
      account,
      password,
      confirmPassword,
      data: curVerifyInfo
    }
    dispatch(verifyCodeAction(params)).then(() => {
      props.nextStepClick(2)
    })
  }

  // 手机和邮箱脱敏显示
  function showMaskData(curVerifyInfo: string) {
    if (curVerifyType === VerifyType.Phone) {
      return maskData(true, curVerifyInfo)
    } else return maskData(false, curVerifyInfo)
  }

  return (
    <ResetPwdWrapper>
      <Form labelCol={{ span: 4 }} onFinish={onFinish}>
        <Form.Item label="密码">
          <Input.Password
            name={InputName.Password}
            value={password}
            onChange={handleInputChange}
          />
        </Form.Item>
        <Form.Item
          name="confirmPassword"
          label="确认密码"
          rules={[{ validator: validateConfirmPassword }]}
        >
          <Input.Password
            name={InputName.ConfirmPassword}
            value={confirmPassword}
            onChange={handleInputChange}
          />
        </Form.Item>
        <Form.Item label="验证方式">
          <Input
            value={showMaskData(curVerifyInfo)}
            disabled
            addonAfter={selectAfter}
          />
        </Form.Item>
        <Form.Item
          label="验证码"
          rules={[{ required: true, message: '请输入验证码！' }]}
        >
          <div className="code-wrapper">
            <Input
              name={InputName.Code}
              value={code}
              onChange={handleInputChange}
            />
            <VerifyCodeButton onClick={getCodeClick} />
          </div>
        </Form.Item>
        <Form.Item>
          <Button type="primary" style={{ width: '100%' }} htmlType="submit">
            下一步
          </Button>
        </Form.Item>
      </Form>
    </ResetPwdWrapper>
  )
}

export default memo(ResetPwd)
